<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  <link href="css/demo_table.css" rel="stylesheet" type="text/css" />
  
  <script type="text/javascript" src="js/website/jquery-1.4.2.min.js" ></script>
  <script type="text/javascript" src="js/website/cufon-yui.js"></script>
  <script type="text/javascript" src="js/website/Humanst521_BT_400.font.js"></script>
  <script type="text/javascript" src="js/website/Humanst521_Lt_BT_400.font.js"></script>
  <script type="text/javascript" src="js/website/roundabout.js"></script>
  <script type="text/javascript" src="js/website/roundabout_shapes.js"></script>
  <script type="text/javascript" src="js/website/gallery_init.js"></script>
  <script type="text/javascript" src="js/website/cufon-replace.js"></script>
  <script type="text/javascript" src="js/jquery/jquery.dataTables.js"></script>
  
  
<script type="text/javascript">
			$(document).ready(function() {
				$("#example").dataTable();
			} );


function inviteFamilyMember() {
	var dialog;
			    $dialog = $("#inviteForm")
				.dialog({
					draggable: false,
					modal: true,
					resizable: false,
					show: 'slide',
					autoOpen: false,
					height: 500,
					width: 700,
					title: 'Invite Family Member'
				});
			}
</script>
</head>

<body>
  <!-- header -->
  <header>
    <div class="container">
    	<h1><a href="index.php">FamTree</a></h1>
      <nav>
        <ul>
          <li><a href="home.php">Home</a></li>
          <li><a href="profile.php">Profile</a></li>
          <li><a href="pedigreetree.php">Tree</a></li>
          <li><a href="list.php" class="current">List</a></li>
          <li><a href="#">News</a></li>
        </ul>
      
      </nav>
    </div>
	</header>
  <div class="main-box">
  	<div class="container">
    	<?php 
   			include ("loginBox.php")
    	?>
	    
	 
	  	<br><br>
	  	
	  	<h2> Family <span>List</span></h2>
    	<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
			<thead>
				<tr>
					<th>Name</th>
					<th>Surname</th>
					<th> Profile </th>
					<th>Invite</th>
				</tr>

			</thead>
			<tbody>
				<tr class="old">
					<td>Yan Zhang</td>
					<td>Tan</td>
					<td class="center"><a href="">View</a></td>
					<td class="center">fi3ry_boi86@hotmail.com</td>
				</tr>
				<tr class="even">
					<td>Child 1</td>
					<td>Tan</td>
					<td class="center"><a href="">View</a></td>
					<td class="center">iamchild1@hotmail.com</td>
				</tr>
				<tr class="old">
					<td>Child 2</td>
					<td>Tan</td>
					<td class="center"><a href="">View</a></td>
					<td class="center"><input type="button" value="Invite" class="submit" onclick=""></td>
				</tr>
				<tr class="even">
					<td>Child 3</td>
					<td>Tan</td>
					<td class="center"><a href="">View</a></td>
					<td class="center"><input type="button" value="Invite" class="submit" onclick="inviteFamilyMember()"></td>
				</tr>
				<tr class="odd">
					<td>Child 4</td>
					<td>Tan</td>
					<td class="center"><a href="">View</a></td>
					<td class="center"><input type="button" value="Invite" class="submit" onclick="inviteFamilyMember()"></td>
				</tr>
		
			</tbody>
			<tfoot>
				<tr>
					<th>Name</th>
					<th>Surname</th>
					<th>Profile</th>
					<th>Invite</th>
				</tr>
			</tfoot>
		</table>
	</div>
</div>

  <!-- footer -->
  <footer>
    <div class="container">
    	<div class="wrapper">
        <div class="fleft">Copyright - FamTree Pte Ltd</div>
      </div>
    </div>
  </footer>
  <script type="text/javascript"> Cufon.now(); </script>
  
   <form id="inviteForm" method="POST" action="" style="display:none;">
	<div class="form-row">
		<span class="label">Email Address</span>
		<input type="text" name="email" />
	</div>
	<div class="form-row">
		<input class="submit" type="submit" value="Invite">
	</div>

</form>
  
</body>
</html>